<template>
  <page-frame>
    <el-row :gutter="15">
      <el-col :span="20">

        <!-- 账户信息 -->
        <div class="panel-box">
          <el-row class="panel-body">
            <el-col :span="12">
              <div class="profile-wrap">
                <span class="img">
                  <img :src="userData.avatar || '/static/images/member/avatar.png'">
                </span>
                <div class="info">
                  <div>
                    <h4>{{userData.realname}}</h4>
                    <p>{{userData.shop_name}}</p>
                  </div>
                </div>
              </div>
            </el-col>

            <el-col :span="12">
              <div class="account-wrap">
                <div class="sum">账户余额：<b class="price">{{userData.balance}}</b>&nbsp;元</div>
                <div class="btn-warp">
                  <el-button size="small" @click="$goPage('pc/finance/funds', {tab: 'bill'})">明细</el-button>
                  <el-button size="small" @click="$goPage('pc/finance/withdraw')">提现</el-button>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>

        <!-- 分销佣金 -->
        <panel-commission />

        <!-- 常用服务 -->
        <panel-common-menu />

        <!-- 广告轮播 -->
        <panel-banner :list="bannerList" v-if="bannerList && bannerList.length > 0" />

        <!-- 热门景点 -->

        <!-- 产品 -->
        <panel-product />

      </el-col>
      <el-col :span="4">
        <!-- 联系客服 -->
        <panel-service :data="serviceInfo" />
      </el-col>
    </el-row>

    <!-- 重要公告弹窗 -->
    <bulletin-dialog />

  </page-frame>
</template>

<script>
  import PageFrame from '@cmpt_pc/frame'
  import PanelCommission from "./components/panel-commission"
  import PanelCommonMenu from './components/panel-common-menu'
  import PanelBanner from './components/panel-banner'
  import PanelProduct from './components/panel-product'
  import PanelService from './components/panel-service'
  import BulletinDialog from './components/bulletin-dialog'

  import {
    getHomeData,
  } from '@api/modules/index'

  import {
    Row,
    Col,
    Button,
  } from 'element-ui'

  export default {
    name: 'pc-home',
    components: {
      [Row.name]: Row,
      [Col.name]: Col,
      [Button.name]: Button,

      PageFrame,
      PanelCommission,
      PanelCommonMenu,
      PanelBanner,
      PanelProduct,
      PanelService,
      BulletinDialog,
    },

    data() {
      return {
        userData: {},
        bannerList: [],
        // 联系客服
        serviceInfo: {},
      }
    },

    methods: {
      async getData() {
        getHomeData().then(res => {
          const data = res.data || {}
          this.userData = data.member || {}
          this.bannerList = data.banner_info
          this.serviceInfo = {
            customer_wechat_qr: data.customer_wechat_qr,
            ...data.customer_service,
            ...data.wechat_base_info,
          }
        })
      },
    },

    created() {
      this.getData()
    },

  }
</script>

<style lang="less" scoped>
  @import "~@style_pc/basic/utils/index";

  .profile-wrap {
    padding-left: 100px;
    margin: 30px 20px;
    position: relative;
    min-height: 74px;

    .img {
      top: 0;
      left: 0;
      width: 74px;
      height: 74px;
      border-radius: 50%;
      position: absolute;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .info {
      h4 {
        font-size: @font-size-md;
      }

      p {
        margin-top: 5px;
        font-size: @font-size-default;
      }
    }
  }

  .account-wrap {
    padding: 50px 20px;
    text-align: right;

    .btn-warp {
      display: inline-block;

    }

    .sum {
      display: inline-block;
      margin-right: 50px;

      .price {
        font-size: @font-size-lg;
        color: @color-warn;
      }
    }

  }
</style>
